<template>
	<view>
		<view class="flex align-center search">
			<view class="margin-right-sm">
				<slot>
					<!-- 标签接口 -->
					<text style="font-size: 25px;" :class="icon?icon:'cuIcon-search'"></text>
				</slot>
			</view>
			<!-- @confirm 按键enter -->
			<!-- @blur 聚焦 -->
			<input
			v-model="searchText"
			:type="type" 
			value=""
			:placeholder="holder?holder:'请输入搜索内容'"
			@confirm="handleEmit"
			@blur="handleEmit"
			/>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref, type Ref } from 'vue';

	withDefaults(
		defineProps<{
			icon?:string
			type?:string
			holder?:string
		}>(),
		{
			type:'text'
		}
	)
//组件通信
const model=defineModel<string>()//组件与页面的通道
const searchText:Ref<string>=ref(model.value?model.value:'')//页面传向组件
const handleEmit=()=>{//组件传向页面
	model.value=searchText.value
}
</script>

<style>
.search{
	padding: 30rpx;
	border: 1rpx solid #eee;
}
</style>